var reader;
var progress = document.querySelector('.percent');

/**
 * 校验是否支持HTML5 中的file API
 * 
 * @returns
 */
$(function() {
	if (window.File && window.FileReader && window.FileList && window.Blob) {
		alert("支持HTML5 中的file API");
	} else {
		alert('不支持新特性');
	}
});

/**
 * 监控读取进度
 * 
 * @returns
 */
// 取消读取文件
function abortRead() {
	reader.abort();
}

// 错误汇总
function errorHandler(evt) {
	switch (evt.target.error.code) {
	case evt.target.error.NOT_FOUND_ERR:
		alert('没有找到文件!');
		break;
	case evt.target.error.NOT_READABLE_ERR:
		alert('文件读取失败');
		break;
	case evt.target.error.ABORT_ERR:
		break;
	default:
		alert('文件太大，请选择下面的切割文件');
	}
	;
}
// 实时修改进度条
function updateProgress(evt) {
	debugger;
	if (evt.lengthComputable) {
		var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
		if (percentLoaded < 100) {
			progress.style.width = percentLoaded + '%';
			progress.textContent = percentLoaded + '%';
		}
	}
}

function handleFileSelect(evt) {
	progress.style.width = '0%';
	progress.textContent = '0%';
	debugger;
	reader = new FileReader();
	reader.onerror = errorHandler;
	reader.onprogress = updateProgress;
	reader.onabort = function(e) {
		alert('读取文件失败');
	};
	// 赋予进度条class
	reader.onloadstart = function(e) {
		document.getElementById('progress_bar').className = 'loading';
	};
	// 赋予进度条属性
	reader.onload = function(e) {
		progress.style.width = '100%';
		progress.textContent = '100%';
		// 2000毫秒后进度条自动消失
		setTimeout("document.getElementById('progress_bar').className='';",
				2000);
	}
	reader.readAsBinaryString(evt.target.files[0]);
}

// 如果改变文件 重置
document.getElementById('files').addEventListener('change', handleFileSelect,
		false);

/**
 * 拖放文件
 * 
 * @param evt
 * @returns
 */
function handleDragOver(evt) {
	evt.stopPropagation();
	evt.preventDefault();
	evt.dataTransfer.dropEffect = 'copy';
}

function handleFileSelect1(evt) {
	evt.stopPropagation();
	evt.preventDefault();

	var files = evt.dataTransfer.files;
	var output = [];
	for (var i = 0, f; f = files[i]; i++) {
		// 回显基本属性
		output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a',
				') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate
						.toLocaleDateString(), '</li>');
	}
	document.getElementById('list').innerHTML = '<ul>' + output.join('')
			+ '</ul>';
}

// 绑定监听事件
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect1, false);

function submitForm() {
	// jquery 表单提交
	$("#taskUploadFile").ajaxSubmit(function(message) {
		// 对于表单提交成功后处理，message为表单正常提交后返回的内容
		console.log(message);
	});
	return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
}

function XMLHttpClick() {
	var xhr = new XMLHttpRequest(), 
		formdata = new FormData(), 
		file = document.getElementById("files1"), 
		method = "POST", 
		url = "/demo/auth/file/multipartUpload";
	var upload_file = file.files[0];
	formdata.append('file', upload_file);
	xhr.open(method, url, true);
	xhr.onreadystatechange = function() {
		if (xhr.readyState === xhr.DONE) {
			if (xhr.status === 200) { // 请求成功
				console.log(xhr.response);
			} else { // 请求失败
				console.log(xhr.response);
			}
		}
	};
	xhr.ontimeout = function(event) {
		console.log('请求超时！');
	}
	xhr.send(formdata);

}
